clip
|
|
|
|
|
|
|||||||||
|
7.0 |
8.0 |
9.0 |
7.0 |
8.0 |
9.6 |
10.0 |
10.0 |
3.1 |
4.0 |
5.0 |
3.0 |
3.6 |
4.0 |
|
Помилка |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Коротка інформація
|
CSS |
CSS2,
CSS2.1 |
|
Значення
за умовчанням |
auto |
|
Наслідує |
Ні |
|
Застосовується |
До
блокових елементів |
|
Аналог
HTML |
Ні |
|
Посилання
на специфікацію |
http://www.w
3.org/TR/CSS21/visufx.html#propdef - clip |
Опис
Властивість
clip визначає область елементу, що позиціонується, в якій буде показано його
вміст. Усе, що не поміщається в цю область, буде обрізано і стає невидимим. На
даний момент єдино доступна форма області - прямокутник. Усе інше залишається
тільки в мріях. clip працює тільки для елементів, що абсолютно позиціонуються.
Синтаксис
clip:
rect(Y1, X1, Y2, X2) | auto | inherit
Значення
В якості
значень використовується відстань від краю елементу до області вирізки, яке
задається в одиницях CSS - піксели (px), em та ін. Якщо край області треба
залишити без змін, слід встановити auto, положення інших значень показане на
мал. 1.
Мал. 1.
Значення властивості clip
Приклад
HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows - 1251">
<title>clip</title>
<style type="text/css">
#layer {
position: absolute; /* Абсолютне
позиціонування */
clip: rect(40px, auto, auto, 40px); /*
Ховаємо частину тексту */
width: 200px; /* Ширина блоку */
color: white; /* Колір тексту */
background: #7f4c3e; /* Колір фону */
border: 1px solid black; /* Параметрів рамки
*/
padding: 10px; /* Полів навколо тексту */
}
</style>
</head>
<body>
<div id="layer">
<p>Луцький національний технчний
університет є одним із найкращих професійних закладів освіти у місті Луцьку.
Найкращою з підготовки спеціалістів є кафедра професійного навчання, що
займається професійною підготовкою студентів.</p>
</div>
</body>
</html>
Результат
цього прикладу показаний ні мал. 2.
Мал. 2.
Застосування clip у браузері Opera 9.23
Об'єктна модель
[window.]document.getElementById("elementID").style.clip
Браузери
Internet
Explorer до сьомої версії включно працює з іншою формою запису, при якій
значення координат розділяються між собою пропуском, а не комою, - clip:
rect(40px auto auto 40px). Також Internet Explorer до сьомої версії включно не
підтримує значення inherit.